<template>
 <div>
   <el-button @click="goback()" type="primary" style="position:absolute;left: 10px;top:10px">返回主菜单</el-button>
   <h1>素材水印背景设置</h1>
   <h5>注意: 仅支持png格式，大小不超过2M</h5>
   <el-switch
     @change="switchWaterMarkOpenChange"
     style="display: block"
     v-model="waterMarkOpen"
     active-color="#13ce66"
     inactive-color="#ff4949"
     inactive-text="开启素材水印">
   </el-switch>
   <el-image  :src="defaultwater" style="width: 500px; height: 500px;margin-top: 20px" >
     <div slot="placeholder" class="image-slot">
       加载中<span class="dot">...</span>
     </div>
   </el-image><br>
   <span>尺寸: {{size}}</span>
   <span style="margin-left: 200px">格式: {{format}}</span><br>
   <el-upload
     class="upload-demo"
     :action="api"
     :http-request="uploadQiniu"
     :on-success="filesuccess"
     :before-upload="beforeAvatarUpload"
     :headers="token"
     :on-remove="handleRemove"
     :file-list="fileList"
     list-type="picture">
     <el-button size="small" type="primary">点击上传</el-button>
   </el-upload>
 </div>
</template>

<script>
import website from "@/config/website";
import {getToken} from "@/util/auth";
import {queryWaterMarkOpen,setWaterMarkOpen, setWaterMarkUrl} from "@/api/system/client";
import * as qiniuTools from "../../util/qinnu_upload";

export default {
  name: "Materialwatermark",
  data() {
    // return {
    //   api:"/api/beetles-business/watermark/fileupload",
    //   issuccess:false,
    //   token:"",
    //   format:"png",
    //   size:"1280*720",
    //   waterMarkOpen: true,
    //   defaultwater:"/img/icon/watermarkImgTemplate.png",
    // }
    return {
      api:"/api/beetles-business/watermark/newfileupload",
      issuccess:false,
      token:"",
      format:"png",
      size:"1280*720",
      waterMarkOpen: true,
      defaultwater:"/img/icon/watermarkImgTemplate.png",
    }
  },
  created() {
    let headers = {};
    headers[website.tokenHeader] = getToken();
    this.token=headers;
    queryWaterMarkOpen().then((res)=>{
      let waterMarkOpen = true;
      res.data.data.map((res)=>{
        if(res.variableKey=="open"){
            if(res.variableValue=="0"){
              waterMarkOpen=false
            }
        }
        if(res.variableKey=="watermark_url"){
          this.defaultwater=res.variableValue
        }
      });
      this.waterMarkOpen = waterMarkOpen;
    })
  },
  methods:{
    switchWaterMarkOpenChange(){
      setWaterMarkOpen((this.waterMarkOpen)?'1':'0').then((res)=>{
      });
    },
    filesuccess(response, file ,fileList){
      console.log("resp =>" + response.data)
      console.log("file =>" + file)
      console.log("fileList =>" + fileList)
      this.defaultwater=response.data
    },
    goback(){
      this.$router.go("/system/Navigation");//返回上一层
    },
    beforeAvatarUpload(file) {
      console.log(file)
      const isJPG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 png 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      const isSize = new Promise(function(resolve, reject) {
        let width = 1280;
        let height = 720;
        let _URL = window.URL || window.webkitURL;
        let image = new Image();
        image.onload = function() {
          let valid = image.width == width && image.height == height;
          valid ? resolve() : reject();
        };
        image.src = _URL.createObjectURL(file);
      }).then(
        () => {
          return file;
        },
        () => {
          this.$message.error("上传头像图片尺寸不符合,只能是1280*720!");
          return Promise.reject();
        }
      );
      return isJPG && isLt2M && isSize;
    },
    uploadQiniu(file){
      let fileData = qiniuTools.getFileData(file)
      let callback = {
        next(res){
        },
        error(err){
          this.$message.error("上传图片失败! err => " + err);
        },
        complete(res){
          let watermarkOrgUrl = 'http://' + fileData.server + '/' + res.key
          setWaterMarkUrl(watermarkOrgUrl).then((res) => {})
        }
      }
      let uploader = qiniuTools.uploadQiniuCloud(file, fileData)
      uploader.subscribe(callback)
    }
  }
}
</script>

<style scoped>

</style>
